<template>
  <div class="settings">
    <h2>{{ t('admin.menu.settings') }}</h2>
    <p>{{ t('admin.settings.description') }}</p>
    
    <el-tabs v-model="activeTab" class="settings-tabs">
      <!-- General Settings -->
      <el-tab-pane :label="t('admin.settings.general')" name="general">
        <el-card class="settings-card">
          <template #header>
            <div class="card-header">
              <span>{{ t('admin.settings.generalSettings') }}</span>
            </div>
          </template>
          
          <el-form :model="generalSettings" label-width="200px">
            <el-form-item :label="t('admin.settings.siteName')">
              <el-input v-model="generalSettings.siteName"></el-input>
            </el-form-item>
            
            <el-form-item :label="t('admin.settings.siteDescription')">
              <el-input 
                v-model="generalSettings.siteDescription" 
                type="textarea"
                :rows="3"
              ></el-input>
            </el-form-item>
            
            <el-form-item :label="t('admin.settings.defaultLanguage')">
              <el-select v-model="generalSettings.defaultLanguage">
                <el-option 
                  v-for="lang in languages" 
                  :key="lang.value" 
                  :label="lang.label"
                  :value="lang.value">
                </el-option>
              </el-select>
            </el-form-item>
            
            <el-form-item :label="t('admin.settings.timezone')">
              <el-select v-model="generalSettings.timezone">
                <el-option 
                  v-for="tz in timezones" 
                  :key="tz.value" 
                  :label="tz.label"
                  :value="tz.value">
                </el-option>
              </el-select>
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" @click="saveGeneralSettings">
                {{ t('common.save') }}
              </el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>
      
      <!-- User Management -->
      <el-tab-pane :label="t('admin.settings.userManagement')" name="users">
        <el-card class="settings-card">
          <template #header>
            <div class="card-header">
              <span>{{ t('admin.settings.userManagementSettings') }}</span>
            </div>
          </template>
          
          <el-form :model="userSettings" label-width="200px">
            <el-form-item :label="t('admin.settings.enableUserRegistration')">
              <el-switch v-model="userSettings.enableUserRegistration"></el-switch>
            </el-form-item>
            
            <el-form-item :label="t('admin.settings.requireEmailVerification')">
              <el-switch v-model="userSettings.requireEmailVerification"></el-switch>
            </el-form-item>
            
            <el-form-item :label="t('admin.settings.defaultUserRole')">
              <el-select v-model="userSettings.defaultUserRole">
                <el-option 
                  v-for="role in userRoles" 
                  :key="role.value" 
                  :label="t(`admin.settings.roles.${role.value.toLowerCase()}`)"
                  :value="role.value">
                </el-option>
              </el-select>
            </el-form-item>
            
            <el-form-item :label="t('admin.settings.passwordPolicy')">
              <el-input-number 
                v-model="userSettings.minPasswordLength" 
                :min="6" 
                :max="50"
              ></el-input-number>
              <span class="input-description">{{ t('admin.settings.minPasswordLength') }}</span>
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" @click="saveUserSettings">
                {{ t('common.save') }}
              </el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>
      
      <!-- Email Settings -->
      <el-tab-pane :label="t('admin.settings.email')" name="email">
        <el-card class="settings-card">
          <template #header>
            <div class="card-header">
              <span>{{ t('admin.settings.emailSettings') }}</span>
            </div>
          </template>
          
          <el-form :model="emailSettings" label-width="200px">
            <el-form-item :label="t('admin.settings.smtpHost')">
              <el-input v-model="emailSettings.smtpHost"></el-input>
            </el-form-item>
            
            <el-form-item :label="t('admin.settings.smtpPort')">
              <el-input-number 
                v-model="emailSettings.smtpPort" 
                :min="1" 
                :max="65535"
              ></el-input-number>
            </el-form-item>
            
            <el-form-item :label="t('admin.settings.smtpUsername')">
              <el-input v-model="emailSettings.smtpUsername"></el-input>
            </el-form-item>
            
            <el-form-item :label="t('admin.settings.smtpPassword')">
              <el-input 
                v-model="emailSettings.smtpPassword" 
                type="password"
                show-password
              ></el-input>
            </el-form-item>
            
            <el-form-item :label="t('admin.settings.emailFrom')">
              <el-input v-model="emailSettings.emailFrom"></el-input>
            </el-form-item>
            
            <el-form-item :label="t('admin.settings.enableEmailNotifications')">
              <el-switch v-model="emailSettings.enableEmailNotifications"></el-switch>
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" @click="saveEmailSettings">
                {{ t('common.save') }}
              </el-button>
              <el-button @click="testEmailSettings">
                {{ t('admin.settings.testEmail') }}
              </el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>
      
      <!-- Security Settings -->
      <el-tab-pane :label="t('admin.settings.security')" name="security">
        <el-card class="settings-card">
          <template #header>
            <div class="card-header">
              <span>{{ t('admin.settings.securitySettings') }}</span>
            </div>
          </template>
          
          <el-form :model="securitySettings" label-width="200px">
            <el-form-item :label="t('admin.settings.sessionTimeout')">
              <el-input-number 
                v-model="securitySettings.sessionTimeout" 
                :min="1" 
                :max="1440"
              ></el-input-number>
              <span class="input-description">{{ t('admin.settings.minutes') }}</span>
            </el-form-item>
            
            <el-form-item :label="t('admin.settings.bruteForceProtection')">
              <el-switch v-model="securitySettings.bruteForceProtection"></el-switch>
            </el-form-item>
            
            <el-form-item :label="t('admin.settings.maxLoginAttempts')" v-if="securitySettings.bruteForceProtection">
              <el-input-number 
                v-model="securitySettings.maxLoginAttempts" 
                :min="1" 
                :max="100"
              ></el-input-number>
            </el-form-item>
            
            <el-form-item :label="t('admin.settings.lockoutDuration')" v-if="securitySettings.bruteForceProtection">
              <el-input-number 
                v-model="securitySettings.lockoutDuration" 
                :min="1" 
                :max="1440"
              ></el-input-number>
              <span class="input-description">{{ t('admin.settings.minutes') }}</span>
            </el-form-item>
            
            <el-form-item :label="t('admin.settings.twoFactorAuth')">
              <el-switch v-model="securitySettings.twoFactorAuth"></el-switch>
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" @click="saveSecuritySettings">
                {{ t('common.save') }}
              </el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { useI18n } from 'vue-i18n'
import { ElMessage } from 'element-plus'

export default {
  name: 'SystemSettings',
  setup() {
    const { t } = useI18n()
    const activeTab = ref('general')
    
    const generalSettings = reactive({
      siteName: 'Exchange Platform',
      siteDescription: 'A comprehensive goods exchange platform',
      defaultLanguage: 'en',
      timezone: 'Asia/Shanghai'
    })
    
    const userSettings = reactive({
      enableUserRegistration: true,
      requireEmailVerification: true,
      defaultUserRole: 'MERCHANT',
      minPasswordLength: 8
    })
    
    const emailSettings = reactive({
      smtpHost: 'smtp.gmail.com',
      smtpPort: 587,
      smtpUsername: 'your-email@gmail.com',
      smtpPassword: 'your-app-password',
      emailFrom: 'noreply@exchange.com',
      enableEmailNotifications: true
    })
    
    const securitySettings = reactive({
      sessionTimeout: 30,
      bruteForceProtection: true,
      maxLoginAttempts: 5,
      lockoutDuration: 15,
      twoFactorAuth: false
    })
    
    const languages = ref([
      { value: 'en', label: 'English' },
      { value: 'zh', label: '中文' }
    ])
    
    const timezones = ref([
      { value: 'Asia/Shanghai', label: 'Asia/Shanghai (GMT+8)' },
      { value: 'America/New_York', label: 'America/New_York (GMT-5)' },
      { value: 'Europe/London', label: 'Europe/London (GMT+0)' },
      { value: 'Asia/Tokyo', label: 'Asia/Tokyo (GMT+9)' }
    ])
    
    const userRoles = ref([
      { value: 'MERCHANT', label: t('admin.settings.roles.merchant') },
      { value: 'ADMIN', label: t('admin.settings.roles.admin') }
    ])
    
    const saveGeneralSettings = () => {
      ElMessage.success(t('admin.settings.generalSettingsSaved'))
      console.log('General settings saved:', generalSettings)
    }
    
    const saveUserSettings = () => {
      ElMessage.success(t('admin.settings.userSettingsSaved'))
      console.log('User settings saved:', userSettings)
    }
    
    const saveEmailSettings = () => {
      ElMessage.success(t('admin.settings.emailSettingsSaved'))
      console.log('Email settings saved:', emailSettings)
    }
    
    const testEmailSettings = () => {
      ElMessage.info(t('admin.settings.emailTestSent'))
      console.log('Testing email settings...')
    }
    
    const saveSecuritySettings = () => {
      ElMessage.success(t('admin.settings.securitySettingsSaved'))
      console.log('Security settings saved:', securitySettings)
    }
    
    return {
      t,
      activeTab,
      generalSettings,
      userSettings,
      emailSettings,
      securitySettings,
      languages,
      timezones,
      userRoles,
      saveGeneralSettings,
      saveUserSettings,
      saveEmailSettings,
      testEmailSettings,
      saveSecuritySettings
    }
  }
}
</script>

<style scoped>
.settings {
  padding: 20px;
}

.settings-tabs {
  margin-top: 20px;
}

.settings-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.input-description {
  margin-left: 10px;
  color: #909399;
  font-size: 14px;
}
</style>